import React, { Component, createRef } from 'react'
import { ForceGraph2D } from 'react-force-graph'
import { connect } from 'react-redux'

import { fetchRobustnessGraph } from '../../actions/robustness'
import { mapGroupToImgPath } from './legendNames'
import Title from './Title'
import Legend from './Legend'
import Search from './Search'
import './index.less'


class Robustness extends Component {
    constructor() {
        super()
        this.state = {
            graphHeight: 864,
            graphWidth: 1628,
        }
        this.ref = createRef()
        this.contextMenuRef = createRef()
        this.graphRef = createRef()
    }

    componentDidMount() {
        this.props.fetchRobustnessGraph()
        const componentThis = this
        setTimeout(() => {
            componentThis.setState({
                graphHeight: this.ref.current.offsetHeight,
                graphWidth: this.ref.current.offsetWidth
            })
        }, 100)
    }

    renderContextMenu = (node, event) => {
        this.contextMenuRef.current.style.display = "block"
        this.contextMenuRef.current.style.position = "absolute"

        const x = event.clientX
        const y = event.clientY
        const w = window.innerWidth
        const h = window.innerHeight
        this.contextMenuRef.current.style.left = Math.min(w - this.contextMenuRef.current.offsetWidth, x) + "px"
        this.contextMenuRef.current.style.top = Math.min(h - this.contextMenuRef.current.offsetHeight, y) + "px"
    }


    renderNodeStyles = (node, context) => {
        const size = 12
        const pathname = mapGroupToImgPath[node.group]
        console.log(node.name, pathname)
        if(pathname) {
            const img = new Image()
            img.src = require(`../../assets/img/${pathname}.png`)
            context.drawImage(img, node.x - size/2, node.y - size/2, size, size)
            context.font = "italic 4px 微软雅黑"
            context.fillStyle = 'white'
            context.fillText(node.name, node.x - size/2, node.y + 1, size)

            if(node.isBlockPoint && node.isBreakPoint) {
                const blockImg = new Image()
                blockImg.src = require('../../assets/img/blocking_point.png')
                context.drawImage(blockImg, node.x + size/6, node.y + size/6, size/3, size/3)
                const breakImg = new Image()
                breakImg.src = require('../../assets/img/break_point.png')
                context.drawImage(breakImg, node.x - size/12, node.y + size/6, size/3, size/3)
            } else if(node.isBlockPoint) {
                const blockImg = new Image()
                blockImg.src = require('../../assets/img/blocking_point.png')
                context.drawImage(blockImg, node.x + size/6, node.y + size/6, size/3, size/3)
            } else if(node.isBreakPoint) {
                const breakImg = new Image()
                breakImg.src = require('../../assets/img/break_point.png')
                context.drawImage(breakImg, node.x + size/6, node.y + size/6, size/3, size/3)
            }

        } else {
            const size = 12
            context.beginPath()
            context.arc(node.x, node.y, size/2, 0, 360, false)
            context.fillStyle = 'gray'
            context.fill()
            context.closePath()
            context.font = "italic 4px 微软雅黑"
            context.fillStyle = 'white'
            context.fillText(node.name, node.x - size/2, node.y + 1, size)
        }
    }

    render() {
        const { graphData, isLoading } = this.props

        return (
            isLoading
            ?
            <>
                <div className="graph-robustness" ref={this.ref}>
                    <ForceGraph2D 
                        ref={this.graphRef}
                        graphData={{ nodes: [], links: [] }}
                    />
                </div>
                <Title />
            </>
            :
            <>
                <div className="graph-robustness" ref={this.ref}>
                    <ForceGraph2D 
                        ref={this.graphRef}
                        // Data Input
                        graphData={graphData}
                        // Container Layout
                        height={this.state.graphHeight}
                        width={this.state.graphWidth}
                        backgroundColor='rgba(5, 5, 255, 0.6)'
                        // Node Styling
                        nodeCanvasObject={(node, context) => {
                            this.renderNodeStyles(node, context)
                            // if(node.id === 1) {
                            //     const img = new Image()
                            //     img.src = require('../../assets/img/capacity.png')
                            //     const blockImg = new Image()
                            //     blockImg.src = require('../../assets/img/blocking_point.png')
                            //     const size = 12
                            //     context.drawImage(img, node.x - size/2, node.y - size/2, size, size)
                            //     context.drawImage(blockImg, node.x + size/12, node.y + size/12, size/2, size/2)
                            //     context.font = "italic 4px 微软雅黑"
                            //     context.fillStyle = 'white'
                            //     context.fillText('121产能', node.x - size/2, node.y + 1, size)
                            // } else {
                            //     const size = 12
                            //     context.beginPath()
                            //     context.arc(node.x, node.y, size/2, 0, 360, false)
                            //     context.fillStyle = 'gray'
                            //     context.fill()
                            //     context.closePath()
                            // }
                        }}
                        // Link Styling
                        linkWidth={4}
                        linkDirectionalArrowLength={2}
                        linkDirectionalArrowRelPos={0.9}
                        linkDirectionalParticles={1}
                        // Interaction
                        onNodeHover={(node => document.body.style.cursor = node ? 'pointer' : null)}
                        onNodeClick={(node, event) => {
                            this.graphRef.current.centerAt(node.x, node.y, 1000)
                            this.graphRef.current.zoom(8, 2000)
                        }}
                        onNodeRightClick={(node, event) => {
                            console.log(node)
                            this.renderContextMenu(node, event)
                        }}
                        onNodeDragEnd={(node) => {
                            node.fx = node.x
                            node.fy = node.y
                        }}
                        onBackgroundClick={() => {
                            this.contextMenuRef.current.style.display = "none"
                        }}
                        onBackgroundRightClick={() => {
                            this.contextMenuRef.current.style.display = "none"
                        }}
                    />
                </div>
                <Title />
                <Legend />
                <Search graph={this.graphRef.current} />
                <div ref={this.contextMenuRef} className="contextmenu" style={{display: "none"}}>
                    <ul>
                        <li><span>深度钻取</span></li>
                        <li><span>全景视图</span></li>
                    </ul>
                </div>
            </>
        )
    }
}

const mapStateToProps = (state) => ({
    graphData: state.robustness.graph,
    isLoading: state.robustness.isLoading
})

export default connect(mapStateToProps, { fetchRobustnessGraph })(Robustness)
